<style scoped>
</style>
<template>
  <div ref="SingleBarAndLine" style="width: 100%; height: 100%"></div>
</template>
<script>
import { adaptePX } from "./lib/common.js";
export default {
  name: "SingleBarAndLine",
  props: {
    data: Object,
    option: Object,
  },
  data() {
    return {};
  },
  watch: {
    data: {
      handler: function (val) {
        this.init();
      },
      deep: true,
    },
  },
  methods: {
    init() {
      let myChart = echarts.init(this.$refs["SingleBarAndLine"]);
      var yNames = this.data.series.map((item) => item.unit || ""),
        yAxis = [],
        seriesArr = [];
      yNames.map((item) => {
        yAxis.push({
          type: "value",
          name: item,
          nameGap: 10,
          nameTextStyle: {
            show:true,
            fontSize: adaptePX(this.option.nameFontSize)||16,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: this.option.nameColor || "#fff",
              fontSize: adaptePX(this.option.nameFontSize)||16,
            },
          },
          axisLine: {
            lineStyle: {
              color: this.option.lineColor || "#fff",
            },
          },
        });
      });
      this.data.series.map((item, i) => {
        seriesArr.push({
          name: item.name,
          tooltip: {
            show: true,
          },
          type: item.type || "bar",
          barWidth: this.option.barWidth || 10, //柱子宽度
          yAxisIndex: i,
          smooth: this.hasProps(this.option,'smooth',false),
          symbol: "roundRect",
          symbolSize: this.option.symbolSize || 3,
          label: {
            show: this.hasProps(this.option,'labelShow',false),
            position: "top",
            padding: 10,
            textStyle: {
              fontSize: adaptePX(this.option.nameFontSize)||16,
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: this.option.barColor[i].color1,
                },
                {
                  offset: 1,
                  color:
                    this.option.barColor[i].color2 ||
                    this.option.barColor[i].color1,
                },
              ]),
            },
          },
          data: item.data,
          legendHoverLink: false,
        });
      });
      var option = {
        // animation: false, //去除加载时缓动动画
        grid: {
          top: this.option.gridY || (this.option.yNameShow?30:'5%'),
          bottom: this.option.gridY2 || "5%",
          left: this.option.gridX || "5%",
          right: this.option.gridX2 || "5%",
          containLabel: true,
        },
        legend: {
          show: this.hasProps(this.option,'legend',true),
          selectedMode: false, //取消图例上的点击事件
          data: this.data.series.map((item) => item.name || ""),
          top: this.option.legendPosition||'top',
          textStyle: {
            color: this.option.nameColor,
            fontSize: adaptePX(this.option.nameFontSize)||16,
          },
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              color: this.option.nameColor,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: this.option.nameColor,
              fontSize: adaptePX(this.option.nameFontSize)||16,
            },
            // margin: 20,
          },
          splitLine: {
            show: false,
          },
          data: this.data.categories,
        },
        yAxis: yAxis,
        series: seriesArr,
      };
      myChart.setOption(option);
    },
    hasProps(obj,propName,defaultValue){
        return obj.hasOwnProperty(propName)?obj[propName]:defaultValue;
    }
  },
  mounted() {
    this.init();
  },
};
</script>